<template>
  <div class="login">
    <div class="pic">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F031ec8758a3c77aa801219c7761f047.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625655262&t=e1ef4842d8c5809076938ba151d90649"
        alt=""
      />
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="phone"
        label="手机号"
        placeholder="请填写手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请填写密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="icon">
      <van-icon name="chat-o" />
      <van-icon name="smile-o" />
      <van-icon name="phone-o" />
      <van-icon name="scan" />
    </div>

    <div class="foot">
      <input type="checkbox" />同意《用户协议》《隐私政策》《儿童隐私政策》
    </div>
  </div>
</template>

<script>
import { reqLogin } from "../api/user";
import { setToken } from "../utils/auth";
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  methods: {
    async onSubmit(values) {
      console.log("submit", values);
      const result = await reqLogin(values);
      console.log(result);

      if (result.status == 200) {
        Toast("登录成功~");
        setToken(result.data.token);
        this.$router.push("/");
      }
    },
  },
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 13rem;
  background: red;
  color: #fff;
}
.pic img {
  width: 7.2rem;
  height: 6rem;
}
.icon {
  width: 6rem;
  height: 2rem;
  margin: 0 auto;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-around;
}
.van-field {
  width: 6.6rem;
  margin: 0 auto;
  border-radius: 0.5rem;
  margin-top: 0.2rem;
}
.foot {
  width: 100%;
  font-size: 0.2rem;
  text-align: center;
}
</style>
